<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:composite="http://java.sun.com/jsf/composite" xmlns:p="http://primefaces.org/ui">
<head>
<title>(For validationonly)</title>
</head>
<body>
	<composite:interface>
	</composite:interface>
	<composite:implementation>
		<h:outputStylesheet name="css/keypad.css" />
		<h:outputScript name="js/prime-ui-0.9-min.js" />
		<table class="keypadTable">
			<tr>
				<td>
					<button class="keypadButton" type="button">1</button>
				</td>
				<td>
					<button class="keypadButton" type="button">2</button>
				</td>
				<td>
					<button class="keypadButton" type="button">3</button>
				</td>
				<td>
					<button class="keypadButton" type="button">Back</button>
				</td>
			</tr>
			<tr>
				<td>
					<button class="keypadButton" type="button">4</button>
				</td>
				<td>
					<button class="keypadButton" type="button">5</button>
				</td>
				<td>
					<button class="keypadButton" type="button">6</button>
				</td>
				<td>
					<button class="keypadButton" type="button">Delete</button>
				</td>
			</tr>
			<tr>
				<td>
					<button class="keypadButton" type="button">7</button>
				</td>
				<td>
					<button class="keypadButton" type="button">8</button>
				</td>
				<td>
					<button class="keypadButton" type="button">9</button>
				</td>
				<td></td>
			</tr>
			<tr>
				<td>
					<button class="keypadButton" type="button">0</button>
				</td>
				<td>
					<button class="keypadButton" type="button">00</button>
				</td>
				<td>
					<button class="keypadButton" type="button">000</button>
				</td>
				<td></td>
			</tr>
		</table>

		<script>
			$(function() {
				$(".keypadTable button").puibutton();
				$(".keypadTable button").click(function() {
					onClickKeypad($(this).text());
				});

			});
		</script>
		<!-- Create output here -->
	</composite:implementation>
</body>
</html>